<template>
	<view class="pagesWhite">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @click="$tools.back(1)"></view>
				<view class="header-title">填写退货物流</view>
			</view>
		</view> 
		
		<view class="">
			<view class="imgBox">
				<image :src="businessAddress.picUrl" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="orderDetails-btnBox">
			<view class="addrBox">
				<view class="addrBox-title">寄回地址</view>
				<view class="addrBox-box">
					<view class="top">
						<view class="name">{{ businessAddress.name }}</view>
						<view class="phone">{{ businessAddress.phone }}</view>
					</view>
					<view class="addr">{{ businessAddress.address }}</view>
				</view>
			</view>
			
			<view class="buyWaysList">
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">物流公司</view>
						</view>
						<view class="right">
							<!-- @tap.stop="openPopup('textBoxPopup')" -->
							<view class="nextBox">
								<!-- <view class="tt tt--grey" v-if="text == ''">请选择</view> -->
								<view class="tt tt--grey">
									<input type="text" v-model="text" placeholder="请填写" placeholder-class="inputStyle"/>
								</view>
								<image src="@/static/shop/next.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">物流单号</view>
						</view>
						<view class="right">
							<view class="nextBox">
								<view class="tt tt--grey">
									<input type="text" v-model="codeNo" placeholder="请填写" placeholder-class="inputStyle" class="inputStyle"/>
								</view>
								<image src="@/static/shop/next.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="initBtn" @tap.stop="$u.throttle(saveLogistics,1500)">提交物流</view>
			
		</view>
		
		
		<!-- 弹框 -->
		<uni-popup ref="textBoxPopup" type="bottom" :animation="true" @change="changePopup($event,'textBoxPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="application">
						<view class="application-wrapper">
							<view class="headerBox">
								<view class="title">请选择申请原因</view>
								<view class="imageBox" @tap.stop="hidePopup('textBoxPopup')">
									<view class="titleClose">取消</view>
								</view>
							</view>
							<view class="application-list">
								<scroll-view scroll-y="true" class="application-height">
									<view class="application-list__item" v-for="(item,index) in applicationList" :key="index"
									@tap.stop="checkAppActive(index,item)">
										<view class="name" :class="{'name--active' : appActive == item.code}">{{ item.name }}</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				codeNo: '',
				text: '',
				appActive: '',
				applicationList:[
					{name: '中通快递'},{name: '圆通快递'},{name: '顺丰快递'},
				],
				returnId: '',
				businessAddress: {},
			}
		},
		onLoad(options) {
			this.returnId = options.value1;
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.applicationList = [];
				this.getBusinessAddress();
			},
			// 申述
			saveLogistics(){
				if (this.text == '' ) {
					// return this.$tools.toast('请选择物流公司');
					return this.$tools.toast('请填写物流公司');
				}
				if (this.codeNo == '' ) {
					return this.$tools.toast('请填写物流单号');
				}
				var data = {};
				data['returnId'] = this.returnId;
				data['logisticsName'] = this.text;
				data['logisticsNumber'] = this.codeNo;
				console.log("data:",data);
				this.$Ajax('/api/refund/saveLogistics',data,res => {
						if (res.code == 200) {
							this.$tools.toastBack(res.msg,1);
							this.text = '';
						} 
					},err => {
					}
				)
			},
			// 退货时，查询商家退货地址
			getBusinessAddress(){
				var data = {};
				data['returnId'] = this.returnId;
				console.log("data:",data);
				this.$Ajax('/api/refund/getBusinessAddress',data,res => {
						if (res.code == 200) {
							this.businessAddress = res.data;
						} 
					},err => {
					}, 'GET'
				)
			},
			checkAppActive(index,item){
				if(this.appActive != item.code){
					this.appActive = item.code;
					this.text = item.name;
					this.hidePopup('textBoxPopup');
				}
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox{
		width: 100%;
		height: 758rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.orderDetails{
		&-btnBox{
			@include flexLeftColumn;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 740rpx;
			padding: 52rpx 34rpx 96rpx;
			.addrBox{
				width: 100%;
				@include flexLeftColumn;
				&-title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #131414;
				}
				&-box{
					width: 100%;
					margin: 20rpx 0rpx;
					border-radius: 10rpx;
					padding: 26rpx 30rpx 24rpx;
					border: 1px solid transparent;
					background-clip: padding-box, border-box;
					background-origin: padding-box, border-box;
					background-image: linear-gradient(to right, #EAF3ED, #EAF3ED),
					linear-gradient(to right, rgba(112, 221, 73, 0.50) 0%, rgba(36, 190, 98, 0.50) 100%);
					.top{
						@include flexLeft;
						.name{
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #131414;
						}
						.phone{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							margin-left: 10rpx;
						}
					}
					.addr{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						margin-top: 14rpx;
					}
				}
			}
		}
	}
	.contentBoxBg{
		margin: 0rpx 32rpx 200rpx;
		padding: 0;
	}
	.buyWaysList{
		width: 100%;
		&-list{
			&__item{
				padding: 40rpx 0;
				margin: 0 ;
				border-bottom: 1px solid rgba(153,153,153,0.15);
				width: 100%;
				&:nth-last-child(1){
					border-bottom: none;
				}
				.right{
					.nextBox{
						@include flexRight;
						.tt{
							font-family: PingFangSC-Regular, PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #131414;
							margin-right: 20rpx;
							&--grey{
								color: #999999;
							}
							input{
								text-align: right;
								font-size: 28rpx;
								color: #000;
							}
							.inputStyle{
								text-align: right !important;
							}
						}
						image{
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
	}
	
</style>